<template>
	<view>
		<tn-tag v-if="ui === 'tag' " :backgroundColor="statusUI.backgroundColor" :fontColor="statusUI.fontColor"
			shape="circleLeft" width="auto">
			{{ statusUI.text || ''}}
		</tn-tag>

		<tn-tag v-if="ui === 'tag1' " :backgroundColor="statusUI.backgroundColor" :fontColor="statusUI.fontColor"
			shape="radius" width="auto">
			{{ statusUI.text || ''}}
		</tn-tag>


		<!-- <view v-if="type === 'device'">
			<tn-tag v-if="formData.status === 0" backgroundColor="#28B93D" fontColor="#FFFFFF" shape="circleLeft" width="auto">运行</tn-tag>
			<tn-tag v-else-if="formData.status === 20" backgroundColor="#CC5A36" fontColor="#FFFFFF" shape="circleLeft" width="auto">异常</tn-tag>
			<tn-tag v-else-if="formData.status === 30" backgroundColor="#BA2E26" fontColor="#FFFFFF" shape="circleLeft" width="auto">报修</tn-tag>
			<tn-tag v-else-if="formData.status === 10" backgroundColor="#743F23" fontColor="#FFFFFF" shape="circleLeft" width="auto">警告</tn-tag>
			<tn-tag v-else-if="formData.status === 1" backgroundColor="#28A1BA" fontColor="#FFFFFF" shape="circleLeft" width="auto">待巡检</tn-tag>
		</view>
		<view v-if="type === 'biz'">
			<tn-tag v-if="formData.status === 0" backgroundColor="#28B93D" fontColor="#FFFFFF" shape="circleLeft" width="auto">运行</tn-tag>
			<tn-tag backgroundColor="#CC5A36" fontColor="#FFFFFF" shape="circleLeft" width="auto">异常</tn-tag>
			<tn-tag backgroundColor="#BA2E26" fontColor="#FFFFFF" shape="circleLeft" width="auto">报修</tn-tag>
			<tn-tag backgroundColor="#743F23" fontColor="#FFFFFF" shape="circleLeft" width="auto">警告</tn-tag>
			<tn-tag backgroundColor="#28A1BA" fontColor="#FFFFFF" shape="circleLeft" width="auto">待巡检</tn-tag>
		</view> -->
	</view>

</template>
<script>
	const app = getApp();
	import Routine from '@/libs/routine';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		HTTP_ADMIN_URL
	} from '@/config/app.js';
	import store from '@/store';
	import string from '../../tuniao-ui/libs/function/string';
	export default {
		name: 'statusView',
		// components: {
		// 	tkiTree
		// },
		props: {
			ui: {
				type: String,
				default: 'tag'
			},
			type: {
				type: String,
				default: 'device'
			},
			formData: {
				type: Object,
				default: function() {
					return {};
				}
			},
			status: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				value: -1,
				list: [{
					value: '0',
					label: '待审核',
					cssClass: '#000000'
				}, {
					value: '1',
					label: '审核通过',
					cssClass: '#056d9b'
				}, {
					value: '2',
					label: '审核不通过',
					cssClass: '#BA2E26'
				}, {
					value: '3',
					label: '待支付',
					cssClass: '#056d9b'
				}, {
					value: '4',
					label: '已支付',
					cssClass: '#28B93D'
				}, {
					value: '5',
					label: '已退款',
					cssClass: '#BA2E26'
				}, {
					value: '6',
					label: '待取件',
					cssClass: '#CC851E'
				}, {
					value: '7',
					label: '已发货',
					cssClass: '#CC851E'
				}, {
					value: '8',
					label: '已完成',
					cssClass: '#CC5A36'
				}],
				statusUI: {
					backgroundColor: '',
					fontColor: '#FFFFFF',
					text: ''
				}
			}
		},
		async mounted() {
			await this.$onLaunched
			this.value = this.status;
			this.getStatusData();
			// console.log("mounted status:"+this.status);
		},
		updated() {
			this.value = this.status;
			this.getStatusData();
			// console.log("mounted status:"+this.status);
		},
		methods: {
			getStatusData() {
				// console.info(this.type);
				// console.info(this.status);
				let that = this;
				let statusList = this.list;


				// console.table(statusList);
				if (statusList.length > 0) {
					const array = statusList.filter((item) => (Number.parseInt(item.value) === this.value));
					if (array.length > 0) {
						const status = array[0];
						this.statusUI.backgroundColor = status.cssClass;
						this.statusUI.text = status.label;
						this.statusUI.value = this.status;
					}
					// console.table(this.statusUI);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>